<template>
  <div class="tree_icon">
    <el-icon style="float: right" @click="closeMedicalRoomClick">
      <close />
    </el-icon>
  </div>
  <br /><br />
  <div style="text-align: center">
    <el-input
      v-model="compState.filterText"
      :placeholder="placeholderFormatFun()"
      style="width: 90%; margin-bottom: 10px"
      :prefix-icon="Search"
    />
  </div>
  <el-scrollbar height="400px">
    <el-tree
      ref="treeRef"
      class="filter-tree"
      :key="props.isOnlineMedical"
      :props="{ label: 'Name', children: 'Children', isLeaf: 'Leaf' }"
      node-key="Code"
      :load="loadNode"
      lazy
      @node-click="handlemedicalRoomPointNodeClick"
      :filter-node-method="filterNode"
    >
      <template #default="{ data }">
        <div
          class="online-status-clas"
          v-show="data.IsMedicalPoint"
          :style="{
            'background-color': data.OnLine == true ? '#67c23a' : '#909399',
          }"
        ></div>
        <span style="font-size: 15px; overflow: hidden">
          {{ data.Name }}
        </span>
      </template>
    </el-tree>
  </el-scrollbar>
</template>

<script setup>
import { ref, reactive, watch } from 'vue';
import { setupMapState } from '../../../store/utils/hook';
import { QueryMedicalPointList } from '../../../network/hosVenAmbuListData';
import { Search } from '@element-plus/icons-vue';

const props = defineProps({
  data: {
    type: Array,
    default: () => [],
  },
  medicalpointType: {
    type: String,
    default: () => '',
  },
  isOnlineMedical: {
    type: Number,
    default: () => 1,
  },
});
const emit = defineEmits([
  'closeMedicalRoomPointEmit',
  'medicalRoomPointNodeEmit',
]);
const treeRef = ref();
const compState = reactive({
  filterText: '',
});
const { ACVCodesVx } = setupMapState('app', ['ACVCodesVx']);
// 监听输入框
watch(
  () => compState.filterText,
  (newV) => {
    // console.log(newV)
    treeRef.value.filter(newV);
  },
);
// 过滤节点数据
const filterNode = (value, data) => {
  if (!value) return true;
  return data.Name.includes(value);
};
const requestData = async (
  activityCode,
  cityCode,
  venueCode,
  medicalPointType,
  type,
  isOnlineMedical,
) => {
  let res = await QueryMedicalPointList({
    activityCode: activityCode,
    cityCode: cityCode,
    venueCode: venueCode,
    medicalPointType: medicalPointType,
    type: type,
    onLine: isOnlineMedical,
  });
  return res;
};
const loadNode = async (node, resolve) => {
  // console.log("node", node)
  // console.log("props", props)
  // console.log("ACVCodesVx", ACVCodesVx)
  let acvCodes = ACVCodesVx.value;
  // console.log(acvCodes)
  let res = [];
  if (node.level === 0) {
    res = await requestData(
      acvCodes.activityCode,
      acvCodes.cityCode,
      acvCodes.venueCode,
      props.medicalpointType,
      0,
      props.isOnlineMedical,
    );
    // console.log(res)
    resolve(res);
  }
  if (node.level === 1) {
    //点击城市
    res = await requestData(
      acvCodes.activityCode,
      node.data.Code,
      acvCodes.venueCode,
      props.medicalpointType,
      1,
      props.isOnlineMedical,
    );
    treeRef.value.updateKeyChildren(node.data.Code, res);
    resolve(res);
  }
  if (node.level === 2) {
    //点击场馆
    res = await requestData(
      acvCodes.activityCode,
      node.data.ParentID,
      node.data.Code,
      props.medicalpointType,
      2,
      props.isOnlineMedical,
    );
    treeRef.value.updateKeyChildren(node.data.Code, res);
    resolve(res);
  }
  if (node.level === 3) {
    //点击
    console.log('点击了场馆', node.data);
  }
};
const placeholderFormatFun = () => {
  let placeholder = '';
  if (props.medicalpointType == 'MedicalPointType-1') {
    //场馆医务室
    placeholder = '场馆医务室搜索';
  } else if (props.medicalpointType == 'MedicalPointType-2') {
    //FOP医疗点
    placeholder = 'FOP医疗点搜索';
  } else if (props.medicalpointType == 'MedicalPointType-3') {
    //观众医疗点
    placeholder = '观众医疗点搜索';
  } else {
    placeholder = '运动员村诊所搜索';
  }
  return placeholder;
};
const handlemedicalRoomPointNodeClick = (node) => {
  // console.log(node)
  if (node.Lng != undefined) emit('medicalRoomPointNodeEmit', node);
};
const closeMedicalRoomClick = () => {
  compState.filterText = '';
  emit('closeMedicalRoomPointEmit', { type: props.medicalpointType });
};
</script>

<style scoped>
.online-status-clas {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 5px;
}

.tree_icon {
  margin: 5px;
}

.tree_icon:hover {
  color: #758bfd;
  cursor: pointer;
}
</style>
